<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%-- JSTL - Standard Tag Library --%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%-- JSTL - Standard Format Library --%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<%-- Spring Security Form Tag Library --%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>

<%-- Spring Security Tag Library --%>
<%@ taglib uri='http://www.springframework.org/security/tags' prefix='security' %>

<!DOCTYPE html>
<html>

<jsp:include page="/WEB-INF/views/templates/head.jsp" />

<body>

	<jsp:include page="/WEB-INF/views/templates/top.jsp" />
	
    <%--  Page Content --%>
    <div class="container">
    
        <div class="row">

            <%--  Blog Entries Column --%>
            <div class="col-md-1"></div>
            <div class="col-md-10">
            
            <h2><fmt:message key="blog.pageform.title"/></h2>
            
            <div class="vertical-spacing-wrapper">

				<form:form name="pageForm" modelAttribute="page" action="save">
				
		    		<form:hidden path="pageId" />
		    		
		    		<security:csrfInput />

				    <%--
						The submitted username id string needs to be processed with a custom editor registered
						in the controller´s InitBinder method to be converted back to a User Object.
					--%>
				    <input type="hidden" name="user" value="${page.user.username}">

				    <%--
						The submitted date formatted string needs to be processed with a custom editor registered
						in the controller´s InitBinder method to be converted back to a Date Object.
					--%>
					<%--
						Creation date will not be directly edited by the user.
					--%>
				    <input type="hidden" name="creationDate" value="<fmt:formatDate type="both" pattern="MM/dd/yyyy kk:mm" value="${page.creationDate}" />">

			    	<div class="form-group">
				    	<form:label path="title"><fmt:message key="blog.pageform.label.title"/></form:label>
				    	<form:input class="form-control" path="title"/>
				    	<p><span class="label label-danger"><form:errors path="title"/></span></p>
			    	</div>

			    	<div class="form-group">
				    	<form:label path="menuTitle"><fmt:message key="blog.pageform.label.menutitle"/></form:label>
				    	<form:input class="form-control" path="menuTitle"/>
				    	<p><span class="label label-danger"><form:errors path="menuTitle"/></span></p>
			    	</div>

			    	<div class="form-group">
				    	<form:label path="menuOrder"><fmt:message key="blog.pageform.label.menuorder"/></form:label>
				    	<form:input class="form-control" path="menuOrder"/>
				    	<p><span class="label label-danger"><form:errors path="menuOrder"/></span></p>
			    	</div>
			    	
					<div class="form-group">
						<form:label path="body"><fmt:message key="blog.entryform.label.body"/></form:label>
						
					 	<!-- bootstrap-wysiwyg start -->
						<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
							<div class="btn-group">
								<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="icon-font"></i><b class="caret"></b></a>
								<ul class="dropdown-menu">
								</ul>
							</div>
							<div class="btn-group">
								<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height"></i>&nbsp;<b class="caret"></b></a>
								<ul class="dropdown-menu">
									<li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
									<li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
									<li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
								</ul>
							</div>
							<div class="btn-group">
								<a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a> <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a> <a class="btn"
									data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a> <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
							</div>
							<div class="btn-group">
								<a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a> <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a> <a class="btn"
									data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a> <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
							</div>
							<div class="btn-group">
								<a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a> <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a> <a
									class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a> <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
							</div>
							<div class="btn-group">
								<a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="icon-link"></i></a>
								<div class="dropdown-menu input-append">
									<input class="span2" placeholder="URL" type="text" data-edit="createLink" />
									<button class="btn" type="button">Add</button>
								</div>
								<a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="icon-cut"></i></a>							
							</div>							
							<div class="btn-group">
								<a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="icon-picture"></i></a> <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
							</div>
							<div class="btn-group">
								<a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a> <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
							</div>
							<input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
						</div>	
						<div id="editor">
					    	${page.body}
					    </div>
					    <form:hidden id="editorbody" class="form-control textarea_bigger" path="body"/>
						<!-- bootstrap-wysiwyg end -->
						
						<p><span class="label label-danger"><form:errors path="body"/></span></p>				
				 	</div>			    	

					<div class="pull-right">
						<button id="cancelButton" type="button" class="btn btn-default" onclick="location.href='<c:url value="/app/page/list" />';"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> <fmt:message key="blog.form.button.cancel"/></button>
						<button id="saveButton" type="submit" class="btn btn-default"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> <fmt:message key="blog.form.button.save"/></button>
	 				</div>

				</form:form>
			
			</div>
			
			</div>
			<div class="col-md-1"></div>
			
		</div>
		
		<jsp:include page="/WEB-INF/views/templates/foot.jsp" />

    </div>
    <%--  /.container --%>
    
    <script type="text/javascript">
		$(function() {
			function initToolbarBootstrapBindings() {
				var fonts = [ 'Serif', 'Sans', 'Arial', 'Arial Black', 'Courier', 'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times', 'Times New Roman',
						'Verdana' ], fontTarget = $('[title=Font]').siblings('.dropdown-menu');
				$.each(fonts, function(idx, fontName) {
					fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:\''+ fontName +'\'">' + fontName + '</a></li>'));
				});
				$('a[title]').tooltip({
					container : 'body'
				});
				$('.dropdown-menu input').click(function() {
					return false;
				}).change(function() {
					$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');
				}).keydown('esc', function() {
					this.value = '';
					$(this).change();
				});

				$('[data-role=magic-overlay]').each(function() {
					var overlay = $(this), target = $(overlay.data('target'));
					overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
				});
				if ("onwebkitspeechchange" in document.createElement("input")) {
					var editorOffset = $('#editor').offset();
					$('#voiceBtn').css('position', 'absolute').offset({
						top : editorOffset.top,
						left : editorOffset.left + $('#editor').innerWidth() - 35
					});
				} else {
					$('#voiceBtn').hide();
				}
			}
			;
			function showErrorAlert(reason, detail) {
				var msg = '';
				if (reason === 'unsupported-file-type') {
					msg = "Unsupported format " + detail;
				} else {
					console.log("error uploading file", reason, detail);
				}
				$('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>' + '<strong>File upload error</strong> ' + msg + ' </div>').prependTo('#alerts');
			}
			;
			initToolbarBootstrapBindings();
			$('#editor').wysiwyg({
				fileUploadError : showErrorAlert
			});
			window.prettyPrint && prettyPrint();
			
			$('#editor').wysiwyg();
			$('#editor').blur(function(){
				$('#editorbody').val($('#editor').html());
			});
		});
	</script>    
		
</body>